<template>
  <section class="home">
    <h1 class="title">丰图精准决策数字底板</h1>
    <Nav />
    <HeadClock />
    <div class="left-panel">
      <PeopleStaticInfo />
      <LegalPersonInfo />
      <AreaInfo />
      <EventInfo />
    </div>
    <div class="right-panel">
      <HouseType />
      <HouseUse />
    </div>
    <iframe id="3dcharts" src="" frameborder="0"></iframe>
  </section>
</template>

<script>
import HeadClock from '@src/components/5670/clock.vue'
import Nav from '@src/components/5670/nav.vue'
import PeopleStaticInfo from './people-static-info.vue'
import LegalPersonInfo from './legal-person.vue'
import AreaInfo from './area-info.vue'
import EventInfo from './event-info.vue'
import HouseType from './house-type.vue'
import HouseUse from './house-use.vue'
export default {
    name: 'Home',
    components:{
      HeadClock,
      Nav,
      PeopleStaticInfo,
      LegalPersonInfo,
      AreaInfo,
      EventInfo,
      HouseType,
      HouseUse
    },
    data () {
        return {

        }
        
    },
    methods: {
    },
    computed:{
       
    },
    created(){
       
    }
}
</script>
<style scoped lang="less">
  .home{
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    & .title{
      position: absolute;
      background: linear-gradient(to right,#03DCEF,#307FFF);
      -webkit-background-clip:text;
      color: transparent;
      font-size: 60px;
      letter-spacing: 3.33px;
      top: 41px;
      left: 90px;
      font-weight: 700;
    }
    & .left-panel{
      position: absolute;
      top:182px;
      left: 90px;
    }
    & .right-panel{
      position: absolute;
      top:182px;
      right: 90px;
    }
    & iframe{
      width: 100%;
      height: 100%;
      border:none;
      background: rgb(42,50,62);
    }
  }
</style>

